<!-- 例一，将小于10的双色球按0数字显示 -->
<!-- !! 简化之前的代码 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style >
			p {
				width: 100px;
				height: 100px;
				color: white;
				font: 60px/100px Arial;
				/* 圆球半径 */
				border-radius: 50px;
				text-align: center;
				float: left;
				margin-left: 10px;
			}
			.red {
				background-color: red;
			}
			.blue {
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<script>
			var redBalls = []
			for (let i = 0;i < 33;i+=1){
				redBalls.push(i+1)
			}
			
			// color采取默认方式,当需要改值是再传参就行
			function outputBall(num,color='red') {
				document.write(`<p class="${color}">`)
				if (num < 10) 
				// if循环只管一句话们可以省略{}
				document.write('0')
				document.write(num)
				document.write('</p>')
			}
			
			var selectedBalls = []
			for (let i = 1;i <= 6;i += 1) {
				let index = parseInt(Math.random()*redBalls.length)
				selectedBalls.push(redBalls[index])		
				redBalls.splice(index,1)
			}
			selectedBalls.sort((x,y) => x-y)
			// 1.for循环获取每个数
			// for (let i = 0; i < selectedBalls.length;i += 1) {
			// 	let num = selectedBalls[i]
				// 将p标签分开来写
				// outputBall(num)
			// }
			
			// 2.forEach 对数组的每个元素都要执行这段代码
			//高阶函数的使用
			//selectedBalls.forEach(function (item) {outputBall(item)})
			selectedBalls.forEach(item => outputBall(item))
			
			let num = parseInt(Math.random() * 16 +1)
			outputBall(num,'blue')
		</script>
	</body>
</html>
